<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KFTP</title>
    <!-- jquery lib -->
    <script src="/lib/jquery/jquery.min.js"></script>
    <!-- font awesome cdn link -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet">
    <!-- swipper cdn link -->
    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css" rel="stylesheet">
    <!-- overlay css file link -->
    <link href="/lib/overlay/overlay.css" rel="stylesheet" type="text/css" />
    <!-- custom css file link -->
    <link href="/css/main.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <!-- header section starts -->
    <section class="header" id="header">
      <div class="user">
	<img src="img/pic.png" alt="logo"/>
	<h3 class="name"> lilith elsie </h3>
	<p class="post"> front end developer </p>
      </div>
      <nav class="navbar">
	<ul>
	  <li> <a href="#home"> home </a> </li>
	  <li> <a href="#about"> about</a> </li>
	  <li> <a href="#service"> service </a> </li>
	  <li> <a href="#contact"> contact </a> </li>
	</ul>
      </nav>
    </section>
    <!-- header section ends -->

    <i id="menu" class="fas fa-bars"></i>

    <!-- content section starts -->
    <div class="container">
      <section class="home" id="home">
	<h3> hi there... </h3>
	<h3 class="name"> my name is <span> lilith elsie </span> </h3>
	<h3 class="post"> i am a <span class="typing-text"> front end developer </span> </h3>

	<a href="#"> <button class="btn"> hire me </button> </a>

	<div class="share">
	  <a href="#" class="fab fa-twitter"></a>
	</div>
      </section>

      <!-- about section starts -->
      <section class="about" id="about">
	<h1 class="heading"> about me </h1>

	<div class="content">
	  <h3 class="name"> my name is <span> lilith elsie </span> </h3>
	  <p> this is lilith's skills </p>
	</div>

	<div class="skills">
	  <div class="progress">
	    <h3> html <span> 95% </span> </h3>
	    <div class="bar"> <span></span> </div>
	  </div>
	  <div class="progress">
	    <h3> css <span> 85% </span> </h3>
	    <div class="bar"> <span></span> </div>
	  </div>
	  <div class="progress">
	    <h3> javascript <span> 70% </span> </h3>
	    <div class="bar"> <span></span> </div>
	  </div>
	</div>
      </section>
      <!-- about section ends -->

      <!-- service section starts -->
      <section class="service" id="service">
	<h1 class="heading"> file server </h1>

	<div class="swiper box-container" id="fs">
	  <div class="swiper-wrapper">
	    <div class="swiper-slide box">
	      <i class="fas fa-folder"></i>
	      <p> folder name </p>
	    </div>
	    <div class="swiper-slide box">
	      <i class="fas fa-file"></i>
	      <p> file name </p>
	    </div>
	  </div>
	</div>
      </section>
      <!-- service section ends -->

      <!-- contact seciton starts -->
      <section class="contact" id="contact">
	<h1 class="heading"> contact me </h1>

	<div class="row">
	  <form action="https://formspree.io/f/xwkzejyb" method="post">
	    <input type="text" name="first name" class="box" placeholder="first name" />
	    <input type="text" name="last name" class="box" placeholder="last name" />
	    <input type="email" name="email" class="box" placeholder="your email" />
	    <input type="text" name="project" class="box" placeholder="your project" />
	    <textarea name="message" id="" cols="30" rows="10" class="box message" placeholder="message"> </textarea>
	    <input type="submit" value="send" class="btn" />
	  </form>

	  <div class="content">
	    <div class="icons">
	      <h3> <i class="fas fa-map-marker-alt"></i> address </h3>
	      <p> Shanghai, China </p>
	    </div>
	    <div class="icons">
	      <h3> <i class="fas fa-envelope"></i> email </h3>
	      <p> 3295857181@qq.com </p>
	    </div>
	    <div class="icons">
	      <h3> <i class="fas fa-phone"></i> email </h3>
	      <p> +111-222-3333 </p>
	    </div>
	  </div>
	  </div>
	</div>
      </section>
      <!-- contact seciton ends -->
    </div>
    <!-- content section ends -->

    <!-- theme toggler -->
    <div class="theme-toggler" id="theme-toggler">
      <span style="background: linear-gradient(to right, #ff9569 0%, #e92758 100%);"></span>
      <span style="background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);"></span>
      <span style="background: linear-gradient(#999, #111);"></span>
    </div>


    <!-- overlay.js cdn link -->
    <script src="/lib/overlay/overlay.js"></script>
    <!-- marked cdn link -->
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/4.2.3/marked.min.js"></script>
    <!-- typed.js cdn link -->
    <script src="https://cdn.bootcdn.net/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
    <!-- swipper.js cdn link -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
    <!-- custom js file link -->
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>
